<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="assets/css/header.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/commodityDetails.css">
</head>
<body>
<div class="commodityDetails">
    <div class="commodity-header">
        <div class="seckill-top"><div class="seckill-welcome">
            <div class="welcome-content">
                <div class="seckill-text">欢迎来到叩丁严选</div>
                <ul class="seckill-ul">
                    <li class="seckill-li userInfo">
                        <a href="#"  class="user-name">
                            <label>用户名:  </label>
                            <span id="nickName"></span>
                        </a>
                    </li>
                    <li class="seckill-li userInfo">
                        <a href="#" target="_blank" class="user-name">
                            <label>我的订单</label>
                        </a>
                    </li>
                    <li class="seckill-li loginBtn">
                        <a href="login.html" class="shopping-content user-change-login">登录</a>
                    </li>
                </ul>
            </div>
            <div class="seckill-nav">
                <div class="nav-content">
                    <div class="nav-logo"> </div>
                    <div class="nav-select">
                        <ul class="nav-list">
                            <li class="nav-text"><a href="index.html" >首页</a></li>
                            <li class="nav-text"><a href="#">全部商品</a></li>
                            <li class="nav-text"><a href="#">个人中心</a></li>
                            <li class="nav-text"><a href="#">我的订单</a></li>
                            <li class="nav-text"><a href="#">专属福利</a></li>
                        </ul>
                    </div>
                    <div class="nav-search">
                        <div class="input-content">
                            <input type="text" placeholder="输入关键字" class="search-input">
                        </div>
                        <div class="search-img"></div>
                    </div>
                </div>
            </div>
        </div></div>
    </div>
    <div class="commodityDetails-container">
        <div class="container-top">
            <div class="container-top-left">
                <div class="currentImg">
                    <img id="productImg"
                         alt="" class="big-img-data">
                </div>
                <ul class="commodity-ul">
                    <li class="commodity-li"><img
                            src="http://www.wolfcode.cn//upload/images/product_images/20200629/14580253-f2c9-469b-a27e-9ebda835ad39.png"
                            alt=""></li>
                    <li class="commodity-li"><img
                            src="http://www.wolfcode.cn//upload/images/product_images/20200629/44cb466a-1190-4b7f-92ad-31c0ace3dfd6.png"
                            alt=""></li>
                    <li class="commodity-li" style="opacity: 1"><img id = "productImg_small" alt="" width="80" height="80"></li>
                    <li class="commodity-li"><img
                            src="http://www.wolfcode.cn//upload/images/product_images/20200629/ece60fae-0f71-4659-a2c4-996145df8c97.png"
                            alt=""></li>
                </ul>
            </div>
            <div class="container-top-right" id="commodityMsg"></div>
        </div>
        <div class="container-bottom">
            <ul class="container-ul">
                <li class="trigger trigger-active">商品介绍</li>
                <li class="trigger">规格与包装</li>
                <li class="trigger">质检报告</li>
                <li class="trigger">售后保障</li>
                <li class="trigger">商品评价<s>(500+)</s></li>
                <li class="trigger">本店好评商品</li>
            </ul>
            <div class="container-commodity-message">
                <p class="commodity-name">品牌： <span>六桂福（LUK KWAI FOOK）</span></p>
                <ul class="commodity-bottom-ul">
                    <li class="commodity-bottom-li">
                        <span class="li-label">商品名称： </span>
                        <p class="li-text">  六桂福黄金项链</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">商品编号：  </span>
                        <p class="li-text">  100007432825</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">商品毛重： </span>
                        <p class="li-text">  150.00g</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">商品产地：  </span>
                        <p class="li-text">  中国大陆</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">适用人群：  </span>
                        <p class="li-text">  女</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">款式：  </span>
                        <p class="li-text">  其他</p>
                    </li>
                    <li class="commodity-bottom-li">
                    <span class="li-label">克重： </span>
                    <p class="li-text">  2.1-5克</p>
                </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">用途：  </span>
                        <p class="li-text"> 自戴，婚庆，馈赠，生日礼物</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">规格： </span>
                        <p class="li-text">  42cm</p>
                    </li>
                    <li class="commodity-bottom-li">
                        <span class="li-label">上市时间：  </span>
                        <p class="li-text">  往季</p>
                    </li>
                </ul>
            </div>
            <div class="commodity-image-array">
                <img src="assets/image/details-img1.jpg" alt="">
                <img src="assets/image/details-img2.jpg" alt="">
                <img src="/assets/image/details-img3.jpg" alt="">
                <img src="assets/image/details-img1.jpg" alt="">
                <img src="assets/image/details-img2.jpg" alt="">
                <img src="/assets/image/details-img3.jpg" alt="">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/layui/layui.all.js"></script>
<script type="text/javascript" src="assets/js/ajaxHttp.js"></script>
<script type="text/javascript" src="assets/js/template.js"></script>
<script type="text/javascript" src="assets/js/socket.js"></script>
<script type="text/javascript" src="assets/js/commodityDetails.js"></script>
<script type="text/html" id="commodityMessage">
    <div class="container-title"><%:=currentData.productName%></div>
    <div class="container-subtitle" title="<%:=currentData.productTitle%>查看"><p class="subtitle-text"><%:=currentData.productDetail%><span>查看> </span></p></div>
    <div class="container-body">
        <div class="container-body-title">
            <div class="title-text">
                <i></i>
                <span>叩丁秒杀</span>
            </div>
            <div class="title-time">
                <span class="last-time-text">距离结束</span>
                <div class="current-last-time">
                    <span>20</span> ：  <span>18</span> ：  <span>59</span>
                </div>
            </div>
        </div>
        <div class="container-body-content">
            <div class="container-body-summany">
                <label class="container-label">秒 杀 价</label>
                <div class="container-content price-content">
                    <div class="container-content-left">
                        <h2 class="price"><span>￥</span><%:=currentData.seckillPrice%> / <%:=currentData.intergral%>积分</h2>
                        <span class="delOldNum">[<del>￥<%:=currentData.productPrice%></del>]</span>
                        <span class="tipMsg">降价通知</span>
                    </div>
                    <div class="container-number">
                        <p class="number-cur">累计评价<a class="number-value"> 500+</a></p>
                    </div>
                </div>
            </div>
            <div class="container-body-summany">
                <label class="container-label">秒杀进度</label>
                <div class="container-content">
                    <span class="priceProgress"><i class="progressNum" style="width:<%:=(currentData.stockCount-currentData.currentCount)*100/currentData.stockCount%>%"></i></span>
                    <span class="progressText"><%:=(currentData.stockCount-currentData.currentCount)*100/currentData.stockCount%>%</span>
                </div>
            </div>
        </div>
    </div>
    <div class="container-main">
        <div class="container-blank">
            <div class="blank-top">
                <button class="btn" onclick="snapped(<%:=currentData.id%>,<%:=currentData.time%>)">立即抢购</button>
            </div>
            <div class="blank-text">
                温馨提示 ·不支持7天无理由退货</div>
        </div>
    </div>
</script>
</body>
</html>